<template>
	<view class="signUpBox"
		style="background-image: url(http://tuzhuang-1304727035.file.myqcloud.com/images/sanci14.png);"
	>
		<!-- 最上面图片 -->
		<!-- <view 
			class="signUpBox_top"
			
		> -->
			<!-- 千万补贴 -->
			<!-- <view class="signUpBox_top_qianwan">
				<image src="http://tuzhuang-1304727035.file.myqcloud.com/images/0464d0b5a9eb881f2e4aa12313a8ae04.png"></image>
			</view> -->
			<!-- 0利润装修    节点支付 -->
			<!-- <view class="commonText" style="margin-top: 186rpx;">
				0利润装修    节点支付
			</view> -->
			<!-- 先施工后结算： -->
			<!-- <view class="commonText">
				先施工后结算
			</view> -->
			<!-- 全程3方监理服务 -->
			<!-- <view class="commonText">
				全程3方监理服务
			</view> -->
			<!-- <view class="signUpBox_top_qianwan xingyun" style="margin-top: 96rpx;">
				<image src="http://tuzhuang-1304727035.file.myqcloud.com/images/68a9e9370d8b440d1e1b89e5b45702f1.png"></image>
			</view> -->
		<!-- </view> -->
		
		<!-- 下面内容 -->
		<view class="signUpBox_bottom">
			<!-- 第一个框子 -->
			<view class="signUpBox_bottom_one">
				<view class="common_imgBox">
					<image src="http://tuzhuang-1304727035.file.myqcloud.com/images/23ee04c28de44ecad57e656f291c6c87.png"></image>
				</view>
				<view class="common_text">
					2022年图装杯设计师工匠大赛阳泉站
				</view>
				
				
				<view class="common_input" style="margin-top: 72rpx;">
					<text>您的姓名*：</text>
					<view>
						<input 
							type="text" 
							v-model="nameValue" 
							placeholder=" " 
						/>
					</view>
				</view>
				<view class="common_input">
					<text>您的电话*：</text>
					<view>
						<input 
							type="number" 
							v-model="phobeValue" 
							placeholder=" " 
							maxlength="11"
						/>
					</view>
				</view>
				<view class="common_input">
					<text>您的地址*：</text>
					<view>
						<input 
							type="text" 
							v-model="addressValue" 
							placeholder=" " 
						/>
					</view>
				</view>
				
				<view class="signUpBox_bottom_one_btn"  @tap="gotoChenggong">
					提交报名
				</view>
				<!-- <view class="signUpBox_bottom_one_text" style="margin-top: 42rpx;">
					大赛主办方：阳泉市装修协会
				</view>
				<view class="signUpBox_bottom_one_text">
					大赛承办方：图装平台
				</view> -->
			</view>
			<!-- 4个图片 -->
			<image 
				v-for="(item,index) in imgList"
				:key="index"
				:src="item.img" 
				:style="{'height':item.height}"
				class="commonImg"
			></image>
			
			<!-- 第二个盒子 -->
			<view class="signUpBox_bottom_two">
				<view 
					class="signUpBox_bottom_two_text"
					v-for="(item,index) in textList"
					:key="index"
					:style="{'margin-top':item.margin}"
					:class="item.class"
				>
					{{item.text}}
				</view>
				<view class="common_input" style="margin-top: 54rpx;">
					<text>您的姓名*：</text>
					<view>
						<input 
							type="text" 
							v-model="nameValue" 
							placeholder=" " 
						/>
					</view>
				</view>
				<view class="common_input">
					<text>您的电话*：</text>
					<view>
						<input 
							type="number" 
							v-model="phobeValue" 
							placeholder=" " 
							maxlength="11"
						/>
					</view>
				</view>
				<view class="common_input">
					<text>您的地址*：</text>
					<view>
						<input 
							type="text" 
							v-model="addressValue" 
							placeholder=" " 
						/>
					</view>
				</view>
			</view>
		
			<!-- 免费获取装修闭坑指南 -->
			<view class="signUpBox_bottom_three">
				<view class="signUpBox_bottom_three_title">
					免费获取装修闭坑指南
				</view>
				<view class="signUpBox_bottom_three_common">
					咨询热线：13283539597； 
				</view>
				<view 
					class="signUpBox_bottom_three_common" 
					style="padding-left: 160rpx;margin-top: 10rpx;"
				>
					13313539597
				</view>
				<view 
					class="signUpBox_bottom_three_common"
					style="margin-top: 20rpx;"
				>
					地址：阳泉市居然之家东侧通道（图装科技）
				</view>
			</view>
		</view>
		
		
		<view class="signUpBox_btn" @tap="gotoChenggong">
			提交报名
		</view>
	</view>
</template>

<script>
	import {getOrderIndexActivity} from '@/utils/getRequest.js'
	export default {
		data() {
			return {
				nameValue:'',
				phobeValue:'',
				addressValue:'',
				imgList:[
					{
						img:'http://tuzhuang-1304727035.file.myqcloud.com/images/baoming4.png',
						height:'748rpx'
					},
					{
						img:'http://tuzhuang-1304727035.file.myqcloud.com/images/baoming1.png',
						height:'906rpx'
					},
					{
						img:'http://tuzhuang-1304727035.file.myqcloud.com/images/baoming2.png',
						height:'746rpx'
					},
					{
						img:'http://tuzhuang-1304727035.file.myqcloud.com/images/baoming3.png',
						height:'610rpx'
					}
				],
				textList:[
					{
						text:'2022年图装xx杯',
						margin:'0rpx'
					},
					{
						text:'设计师工匠大赛装修用户火热招募中',
						margin:'26rpx'
					},
					{
						text:'零利润装修    节点支付',
						margin:'28rpx',
						class:'textClass'
					},
					{
						text:'先施工后结算',
						margin:'18rpx',
						class:'textClass'
					},
					{
						text:'全程三方监理服务',
						margin:'10rpx',
						class:'textClass'
					},
					{
						text:'火热招募中    仅招100名',
						margin:'46rpx'
					},
					{
						text:'报名获取1000元装修金',
						margin:'24rpx'
					}
					
				]
			}
		},
		methods: {
			gotoChenggong(){
				if(!this.nameValue){
					uni.showToast({
						title: '请填写姓名',
						icon:'none',
						duration: 2000
					});
					return;
				}
				if(!this.phobeValue){
					uni.showToast({
						title: '请填写电话',
						icon:'none',
						duration: 2000
					});
					return;
				}
				if(!this.addressValue){
					uni.showToast({
						title: '请填写地址',
						icon:'none',
						duration: 2000
					});
					return;
				}
				let phoneTs = /^1[3|4|5|6|7|8][0-9]{9}$/;
				if (!phoneTs.test(this.phobeValue)) {
					uni.showToast({
					    title: '手机号格式不正确',
					    duration: 2000,
						icon:'none'
					});
					return;
				}
				getOrderIndexActivity({
					name:this.nameValue,
					phone:this.phobeValue,
					address:this.addressValue
				}).then(res=>{
					uni.requestPayment({
					    provider: 'wxpay',
						timeStamp: res.timeStamp,
						nonceStr: res.nonceStr,
						package: res.package,
						signType: res.signType,
						paySign: res.paySign,
						success: function (res) {
							uni.navigateTo({
								url:'./signUpCheng/signUpCheng'
							})
						}
					});
				})
				
			}
		}
	}
</script>

<style scoped>
@import url("./signUp.css");
</style>
